<template>
    <div>
        <h1>用户登录</h1>
        <valid-form>
            <template v-slot:user>
                <valid-input v-model="input" type="text" @formEmpty="isEmpty"/>
                <valid-input v-model="password" type="password" @formEmpty="isEmpty"/>
            </template>
            <template v-slot:submit>
                <el-button type="danger" @click="handleLogin">登陆</el-button>
                <el-button type="primary" native-type="reset">重置</el-button>
            </template>
        </valid-form>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import validForm from '@/components/validForm.vue'
import validInput from '@/components/validInput.vue'
import createMessage from '@/hooks/createMessage'
export default defineComponent({
    components: { validForm, validInput },
    setup() {
        const input = ref('')
        const password = ref('')
        const handleLogin = () => {
            if (input.value === '' || password.value === '') {
                createMessage(false, 'failed')
            } else if (input.value === 'aaa' && password.value === '123456') {
                createMessage(true, 'success')
                console.log('登陆成功')
            } else {
                createMessage(false, 'failed')
                console.log('登陆失败')
            }
        }
        return {
            input,
            password,
            handleLogin
        }
    }
})
</script>
<style scoped>

</style>
